import Vue from 'vue'
import Component from 'vue-class-component'
import '@/assets/css/filterStyle.css'

@Component
export default class BrandListClass extends Vue {
  datas = []
  lettersArr = {}
  keys = []
  selectItem = []
  type = ''

  created () {
    this.datas = this.$route.params.datas
    this.type = this.$route.params.type
    this.lettersArr = this.designerLetters()
    for (var key in this.lettersArr) {
      if (this.lettersArr[key].length > 0) {
        this.keys.push(key)
      }
    }
  }

  designerLetters () {
    let letters = {}// new Map()
    letters['#'] = []
    for (let i = 0; i < 26; i++) {
      let letter = String.fromCharCode(65 + i)
      letters[letter] = []
    }

    let numberDesigners = []
    let designerList = this.datas
    for (let designer of designerList) {
      let firstChar = designer.name.substring(0, 1).toUpperCase()
      let letterDesigners = letters[firstChar]
      if (letterDesigners instanceof Array) {
        letterDesigners.push(designer)
      } else {
        numberDesigners.push(designer)
      }
    }
    if (numberDesigners.length > 0) {
      letters['#'] = numberDesigners
    }
    return letters
  }

  handlerClickCell(value) {
    let item = value
    this.$store.dispatch('selectProductFilterItem', item)
    item.checked = !item.checked
    if (item.checked) {
      this.selectItem.push(item)
    } else {
      for (var i = 0; i < this.selectItem.length; i++) {
        let obj = this.selectItem[i]
        if (obj.name === item.name) {
          this.selectItem.splice(i, 1)
          return
        }
      }
    }
  }

  // 取消
  handlerCancel () {
    for (let obj of this.selectItem) {
      if (obj.checked === true) {
        obj.checked = false
        this.$store.dispatch('selectProductFilterItem', obj)
      }
    }
    this.selectItem = []
  }

  // 确定
  handlerSure () {
    eventBus.$emit('filterForProduct', 'refresh')
    this.$router.go(-1)
  }

  createItems (items) {
    const item = items.map(value => {
      return <div onClick={ () => this.handlerClickCell(value)}>
              <mt-cell title={value.name}>
                <icon v-show={!value.checked} name='sortUnSelect' scale = '2'/>
                <icon v-show={value.checked} name='sortSelect' scale = '2'/>
              </mt-cell>
            </div>
    })
    return item
  }

  createSectionItem () {
    const item = this.keys.map(value => {
      return <mt-index-section index={value}>
              { this.createItems(this.lettersArr[value])}
          </mt-index-section>
    })
    return item
  }

  render () {
    return (
      <div class='content'>
        <mt-header class='header' fixed title="品牌列表">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>

      <mt-index-list style='margin-top:56px'>
        {this.createSectionItem()}
      </mt-index-list>

      <div class = 'shareFilterStyleClass'>
            <div onClick={this.handlerCancel}>清除</div>
            <div onClick={this.handlerSure}>筛选</div>
      </div>
      </div>
    )
  }
}
